<template>
  <div class="points-exchange">
    <h2>积分兑换</h2>

    <!-- 积分余额 -->
    <div class="points-balance">
      <h3>当前积分</h3>
      <div class="balance">{{ points }}</div>
    </div>

    <!-- 礼品列表 -->
    <div class="rewards-list">
      <div v-for="reward in rewards" :key="reward.id" class="reward-item">
        <img :src="reward.image" :alt="reward.name">
        <h3>{{ reward.name }}</h3>
        <p>{{ reward.description }}</p>
        <div class="points-required">
          需要积分: {{ reward.points }}
        </div>
        <button 
          @click="exchangeReward(reward)"
          :disabled="points < reward.points"
          :class="{ 'disabled': points < reward.points }"
        >
          兑换
        </button>
      </div>
    </div>

    <!-- 兑换历史 -->
    <div class="exchange-history">
      <h3>兑换历史</h3>
      <div v-for="record in exchangeRecords" :key="record.id" class="history-item">
        <span>{{ record.reward_name }}</span>
        <span>{{ record.points }}积分</span>
        <span>{{ formatDate(record.exchange_date) }}</span>
        <span :class="record.status">{{ record.status }}</span>
      </div>
    </div>

    <!-- 兑换确认弹窗 -->
    <div v-if="showConfirmDialog" class="confirm-dialog">
      <div class="dialog-content">
        <h3>确认兑换</h3>
        <p>是否确认使用 {{ selectedReward.points }} 积分兑换 {{ selectedReward.name }}？</p>
        <div class="dialog-buttons">
          <button @click="confirmExchange">确认</button>
          <button @click="showConfirmDialog = false">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'PointsExchange',
  props: {
    childId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      points: 0,
      rewards: [],
      exchangeRecords: [],
      showConfirmDialog: false,
      selectedReward: null
    }
  },
  methods: {
    async fetchPoints() {
      try {
        const response = await axios.get(`http://localhost:5000/api/points/${this.childId}`)
        this.points = response.data.points
      } catch (error) {
        console.error('获取积分失败:', error)
      }
    },
    async fetchRewards() {
      try {
        const response = await axios.get('http://localhost:5000/api/rewards')
        this.rewards = response.data
      } catch (error) {
        console.error('获取礼品列表失败:', error)
      }
    },
    async fetchExchangeHistory() {
      try {
        const response = await axios.get(`http://localhost:5000/api/exchanges/${this.childId}`)
        this.exchangeRecords = response.data
      } catch (error) {
        console.error('获取兑换历史失败:', error)
      }
    },
    exchangeReward(reward) {
      this.selectedReward = reward
      this.showConfirmDialog = true
    },
    async confirmExchange() {
      try {
        await axios.post('http://localhost:5000/api/exchanges', {
          child_id: this.childId,
          reward_id: this.selectedReward.id,
          points: this.selectedReward.points
        })
        this.showConfirmDialog = false
        this.fetchPoints()
        this.fetchExchangeHistory()
      } catch (error) {
        console.error('兑换失败:', error)
      }
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString()
    }
  },
  mounted() {
    this.fetchPoints()
    this.fetchRewards()
    this.fetchExchangeHistory()
  }
}
</script>

<style scoped>
.points-exchange {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.points-balance {
  text-align: center;
  margin-bottom: 30px;
}

.balance {
  font-size: 36px;
  font-weight: bold;
  color: #42b983;
}

.rewards-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.reward-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
}

.reward-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.points-required {
  color: #666;
  margin: 10px 0;
}

button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.exchange-history {
  margin-top: 30px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.dialog-buttons {
  margin-top: 20px;
}

.dialog-buttons button {
  margin: 0 10px;
}
</style> 